<template>
	<div class="register">
		<div style="margin-bottom: 4vw;">
			<van-nav-bar
			  :title="getPageTitle(router.currentRoute.value.meta.title)"
			  left-text="返回"
			  left-arrow
			  @click-left="()=> router.push('/login')"
			/>
		</div>
		<van-form @submit="onSubmit">
		  <van-cell-group inset>
			<div class="h-img-box">
				<van-uploader v-model="portrait" :after-read="uploadImg" :before-read="beforeRead" upload-text="上传头像" :max-size="2000 * 1024" @oversize="onOversize"  multiple :max-count="1" />
				<!-- <img class="h-img" :src="user.h_img" v-else alt=""> -->
				<p class="h-img-txt" v-if="h_img_show">请上传头像</p>
			</div>
		    <van-field
		      v-model="user.username"
		      name="用户名"
		      label="用户名"
		      placeholder="用户名"
		      :rules="[{ required: true, message: '请填写用户名' }]"
		    />
		    <van-field
		      v-model="user.password"
		      type="password"
		      name="密码"
		      label="密码"
		      placeholder="密码"
		      :rules="[{ required: true, message: '请填写密码' }]"
		    />
			<van-field
			  v-model="user.name"
			  name="真实姓名"
			  label="真实姓名"
			  placeholder="真实姓名"
			  :rules="[{ required: true, message: '请填写真实姓名' }]"
			/>
			<van-field name="radio" label="性别">
				<template #input>
				  <van-radio-group v-model="user.gender" direction="horizontal">
					<van-radio name="1">男</van-radio>
					<van-radio name="2">女</van-radio>
				  </van-radio-group>
				</template>
			</van-field>
			<van-field name="age" label="年龄">
			<template #input>
				<van-stepper v-model="user.age" />
			</template>
			</van-field>
			
			<van-field
			      v-model="user.phone"
			      name="手机号"
				  label="手机号"
			      placeholder="请填手机号"
			      :rules="[{ pattern, message: '请输入正确的手机号' }]"
			    />
			<van-field
			  v-model="user.birthday"
			  name="出生日期"
			  label="出生日期"
			  is-link
  			  readonly
			  placeholder="出生日期"
			  :rules="[{ required: true, message: '选择出生日期' }]"
			  @click="showPicker = true"
			/>
			<van-popup v-model:show="showPicker" position="bottom">
			<van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
			</van-popup>
			<van-field
			      v-model="user.email"
			      name="email"
				  label="邮箱"
			      placeholder="请填写邮箱"
			      :rules="[{ required: true, message: '请输入正确的邮箱' }]"
			    />
			<van-field
				v-model="user.school"
				name="school"
				label="毕业学校"
				placeholder="请填写毕业学校"
				:rules="[{ required: true, message: '请输入毕业学校' }]"
			/>
			<van-field
				v-model="user.specialty"
				name="specialty"
				label="所学专业"
				placeholder="请填写所学专业"
				:rules="[{ required: true, message: '请输入所学专业' }]"
			/>
			<van-field
				v-model="user.education"
				name="education"
				label="最高学历"
				placeholder="请填写最高学历"
				:rules="[{ required: true, message: '请输入最高学历' }]"
			/>
			</van-cell-group>
				<div style="margin: 16px;">
					<van-button round block type="primary" native-type="submit">
						{{!pageLoading?'注册':''}}<van-loading class="loading-bg" type="spinner" color="#303030" size="24px" v-show="pageLoading"/>
					</van-button>
				</div>
		</van-form>
	</div>
</template>

<script setup>
	import { upload } from '../../api/upload.js'
	import { reguser } from '../../api/home.js'
	import { useRouter } from 'vue-router'
	import {getPageTitle} from '../../utils/getPageTitle.js'
	import { ref, reactive, getCurrentInstance} from 'vue'
	import { showToast } from 'vant'
	const {proxy} = getCurrentInstance()
	const _this = proxy
	const router = useRouter()
	const h_img_show = ref(false)
	const pageLoading = ref(false)
	const portrait = ref([])
	const user = reactive({
		username:'',
		password:'',
		name:'',
		gender:'1',//性别
		age: '1',
		birthday:'',
		school:'',
		email:'',
		phone:'',
		specialty:'',
		education:'',
		portrait:'',
	})
	const file = reactive({})
	const pattern = /^(1)[0-9]{10}$/
	const showPicker = ref(false);
	const onConfirm = ({ selectedValues }) => {
      user.birthday = selectedValues.join('/');
      showPicker.value = false;
    };
	
	// const onClickLeft = ()=> router.push('/login')
	const beforeRead = (file) => {
		if (file.type == 'image/jpeg' || file.type == 'image/png'){
			return true;
		}else{
			showToast('请上传 jpg 或 png 格式图片');
			return false;
		}
	}
	const onOversize = (file)=> showToast('图片大小不能超过2M')
	const uploadImg = (file)=>{
		upload({'file':file.file}).then(res=>{
			console.log(res)
			showToast(res.data.message)
			_this.user.portrait = res.data.data
			console.log(_this.user.portrait)
		})
	}
	
	const onSubmit = ()=>{
		if(!_this.user.portrait){_this.h_img_show=true;return}
		_this.pageLoading = true
		reguser(user).then(res=>{
			if(res.code === 200){
				showToast(res.message)
				_this.pageLoading = false
				setTimeout(router.push('/login'),3000)
			}
		})
	}
</script>

<style scoped>
	:deep().van-uploader__upload{margin: 0;}
	.h-img{width: 20vw;height: 20vw;border-radius: 50%;object-fit: contain;object-position: center;}
	.h-img-box{width: 100%;text-align: center;margin: 4vw 0;}
	.h-img-box p.h-img-txt{color: #ee0a24;font-size: 12px;line-height:30px;}
	.h-img-box p.h-img-txt1{font-size: 12px;line-height:30px;}
</style>